<div class="bg-white p-15 mb">
  <span class="font18">技术架构管理</span>
  <button nz-button class="fr" [nzType]="'primary'" title="添加" (click)="addFrames()">
    <i class="anticon anticon-plus"></i>添加
  </button>
</div>

<div class="panel">
  <nz-table #nzTable
            [nzData]="framesList.voList"
            [nzTotal]="framesList.totalRow"
            [nzPageIndex]="framesList.curPage"
            [nzShowTotal]="totalRow"
            (nzPageIndexChangeClick)="getFramesList($event)"
            [nzPageSize]="framesList.pageSize">
    <thead nz-thead>
    <ng-template #totalRow>共 {{framesList.totalRow}} 条数据</ng-template>
    <tr>
      <th nz-th class="text-center" [nzWidth]="'5%'"><span>序号</span></th>
      <th nz-th [nzWidth]="'15%'"><span>技术名称</span></th>
      <th nz-th [nzWidth]="'15%'"><span>模板仓库地址</span></th>
      <th nz-th [nzWidth]="'15%'"><span>模板仓库账户</span></th>
      <th nz-th class="text-center" [nzWidth]="'10%'"><span>是否是公开库</span></th>
      <th nz-th [nzWidth]="'25%'"><span>技术描述</span></th>
      <th nz-th class="text-center" [nzWidth]="'15%'"><span>操作</span></th>
    </tr>
    </thead>
    <tbody nz-tbody>
    <tr nz-tbody-tr *ngFor="let data of nzTable.data;let i = index;">
      <td class="text-center" nz-td>{{i+1}}</td>
      <td nz-td>{{data.name}}</td>
      <td nz-td><a target="_blank" [href]="data.gitHome">{{data.gitHome}}</a></td>
      <td nz-td>{{data.account}}</td>
      <td nz-td class="text-center">
        <nz-switch [ngModel]="data.isPublic === 'Y'" (ngModelChange)="modifyFrameworksState($event,data.code)">
          <span checked>是</span>
          <span unchecked>否</span>
        </nz-switch>
      </td>
      <td nz-td>{{data.description}}</td>
      <td class="text-center" nz-td>
        <button nz-button [nzType]="'default'" title="修改" class="btn-blue-o mr" (click)="modifyFrames(data.code)"><i
          class="anticon anticon-edit"></i></button>
        <button nz-button [nzType]="'danger'" title="删除" (click)="delFrame(data.code)"><i
          class="anticon anticon-delete"></i></button>
      </td>
    </tr>
    </tbody>
  </nz-table>
</div>

<!--弹窗模板-->
<nz-modal [nzVisible]="isVisible" [nzMaskClosable]="false" [nzTitle]="'添加技术架构'" [nzContent]="modalContent"
          (nzOnCancel)="handleCancel()" [nzWidth]="660"
          (nzOnOk)="handleOk($event)" [nzOkLoading]="isConfirmLoading">
  <ng-template #modalContent>
    <form nz-form [formGroup]="validateForm" class="p-20">
      <nz-form-item>
        <nz-form-label [nzSm]="7" nzFor="name" nzRequired>项目名</nz-form-label>
        <nz-form-control [nzSm]="13" [nzValidateStatus]="getFormControl('name')" nzHasFeedback>
          <input nz-input formControlName="name" type="text" id="name" placeholder="请填写项目名">
          <nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').errors">
            <ng-container *ngIf="getFormControl('name').hasError('required')">请填写项目名！</ng-container>
            <ng-container *ngIf="getFormControl('name').hasError('maxlength')">输入的长度不能超过50位！
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <ng-container *ngIf="!curCode">
        <nz-form-item>
          <nz-form-label [nzSm]="7" nzFor="account" nzRequired>模板仓库账户</nz-form-label>
          <nz-form-control [nzSm]="13" [nzValidateStatus]="getFormControl('account')" nzHasFeedback>
            <input nz-input formControlName="account" type="text" id="account" placeholder="请填写模板仓库账户">
            <nz-form-explain *ngIf="getFormControl('account').dirty&&getFormControl('account').errors">
              <ng-container *ngIf="getFormControl('account').hasError('required')">请填写项目名！</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSm]="7" nzFor="password" nzRequired>模板仓库密码</nz-form-label>
          <nz-form-control [nzSm]="13" [nzValidateStatus]="getFormControl('password')" nzHasFeedback>
            <input nz-input formControlName="password" type="password" id="password"
                   placeholder="请填写模板仓库密码">
            <nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').errors">
              <ng-container *ngIf="getFormControl('password').hasError('required')">请填写模板仓库密码！</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSm]="7" nzFor="gitHome" nzRequired>模板仓库地址</nz-form-label>
          <nz-form-control [nzSm]="13" [nzValidateStatus]="getFormControl('gitHome')" nzHasFeedback>
            <input nz-input formControlName="gitHome" type="text" id="gitHome" placeholder="请填写模板仓库地址">
            <nz-form-explain *ngIf="getFormControl('gitHome').dirty&&getFormControl('gitHome').errors">
              <ng-container *ngIf="getFormControl('gitHome').hasError('required')">请填写模板仓库地址！</ng-container>
              <ng-container *ngIf="getFormControl('gitHome').hasError('pattern')">请填写正确的模板仓库地址！</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <nz-form-item>
        <nz-form-label [nzSm]="7" nzFor="description" nzRequired>项目描述</nz-form-label>
        <nz-form-control [nzSm]="13" [nzValidateStatus]="getFormControl('description')" nzHasFeedback>
          <textarea rows="4" nz-input formControlName="description" id="description" placeholder="请填写项目描述"></textarea>
          <nz-form-explain *ngIf="getFormControl('description').dirty&&getFormControl('description').errors">
            <ng-container *ngIf="getFormControl('description').hasError('required')">请填写项目描述！</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="7" nzFor="isPublic" nzRequired>是否是公开库</nz-form-label>
        <nz-form-control [nzSm]="13" [nzValidateStatus]="getFormControl('isPublic')" nzHasFeedback>
          <nz-switch formControlName="isPublic" nzCheckedChildren="是" nzUnCheckedChildren="否"></nz-switch>
          <nz-form-explain *ngIf="getFormControl('isPublic').dirty&&getFormControl('isPublic').errors">
            <ng-container *ngIf="getFormControl('isPublic').hasError('required')">请选择是否公开！</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>
</nz-modal>
